<template>
  <div class="homes">
    <van-nav-bar title="待办工单列表" >
    </van-nav-bar>
    <div class="contents">
        <!-- 新增的待办列表 -->
          <div class="orderList" v-if="tableList">
            <div class="orderListItem bold"><span>工单号</span><span>工单名称</span></div>
            <div @click="orderClick(itemOrder.id,itemOrder.projectType)" class="orderListItem" v-for="(itemOrder,indexOrder) in tableList">
              <span>{{ itemOrder.id }}</span>
              <span>{{ itemOrder.orderName }}</span>
              <!-- <span><a  href="javascript:void(0)">处理</a></span> -->
            </div>
          </div>
    </div>
  </div>
</template>

<script>
import "@/api/index"
// import {start} from "@popperjs/core"
import GetNetUtil from "../../../utils/GetNetUtil";
import { reactive, toRefs,onMounted} from "vue"
import {useRouter} from "vue-router"

export default {
  setup() {
      let state = reactive({
          tableList:[]
      });
    const router = useRouter();
    getOrderList();
    //获取待办工单
    async function getOrderList(){
        GetNetUtil.requestPost("/workBench/selectWorkBenchList", "", "", getOrderList)
        async function getOrderList(resp) {
            if (resp.resultCode === "200") {
                for(var i=0;i<resp.data.length;i++){
                    let table = {};
                   /* if('0204'==resp.data[i].projectType){
                        table.id=resp.data[i].projectNo;
                    }else{
                        table.id=resp.data[i].projectNo;
                    }*/
                    table.id=resp.data[i].projectNo;
                    table.orderName=resp.data[i].projectName;
                    table.projectType=resp.data[i].projectType;
                    state.tableList.push(table);
                }
            }else {
                console.log("查询待办内容出错",resp);
            }
        }
    }
    function orderClick(id,projectType) {
      //处理工单的点击事件
        if('0204'==projectType){
            router.push({
                name: 'micro-zdtyOrderList',
                params: {type: id}
            })
        }else if('0205'==projectType){
            //0205
            router.push({
                name: 'micro-zdtyProblemOrderList',
                params: {type: id}
            })
        }else if('0208'==projectType||'0011'==projectType||'0012'==projectType){
            router.push({
                name: 'micro-newOrderList',
                params: {type: id}
            })
        }else {
            router.push({
                name: 'micro-orderList',
                params: {type: id}
            })
        }
    }
    
    function toList(type) {
      router.push({
        name: 'micro-list',
        params: {type: type}
      })
    }

  /*  function orderClick(id) {
      //处理工单的点击事件
      router.push({
        name: 'micro-orderList',
        params: {type: id}
      })
    }*/
    const onClickLeft = () => history.back()
    return {

      onClickLeft,
        ...toRefs(state),
      toList,
      orderClick
    }
  },
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #f2f4f5;
  overflow: hidden;

  .nav-right {
    font-size: 8px;
    color: #ffffff;
  }

  .contents {
    width: 100%;
    background: #f2f4f5;
    height: calc(100% - 44px);
    overflow-y: auto;
  }

  .swipe {
    height: 170px;
    width: 100%;
    background-color: #ffffff;

    .swipe-img {
      margin: 10px;
      height: 150px;
      width: calc(100% - 20px);
      object-fit: fill;
      border-radius: 5px;
    }
  }

  .marquee-back {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;

    .marquee {
      height: 30px;
      display: flex;
      align-items: center;
      overflow: hidden;

      .paomadeng {
        width: 100%;
        margin: 10px;
        font-size: 10px;

      }
    }

    .icon {
      margin: 10px;
    }
  }

  .section-item {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    width: 100%;

    .item {
      width: 25%;
      // margin: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .img {
        margin-top: 10px;
        background: url("../../../assets/icon/wx_icon_plts.png") no-repeat 0 0;
        background-size: 100% 100%;
        width: 44px;
        height: 44px;
        // background-color: red;
      }

      .title {
        margin: 5px;
        font-size: 10px;
        text-align: center;
      }
    }
  }
  .orderList{
    padding-top: 15px;
    background: #fff;
    margin-top: 5px;
  }
  .orderListItem{
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 13px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    span{
      width: 50%;
      padding: 0 20px;
      text-align: left;
      word-break: break-all;
      a{
        text-decoration: underline;
      }
    }
    
  }

  .orderListItem.bold span{
      font-weight: 600;
  }


}

</style>